<template>
  <div class="list-filter">
    <button
      type="button"
      class="list-filter__btn"
      :class="{ 'is-active': isOpen }"
      @click="isOpen = !isOpen"
    >
      <div
        class="btn__text"
        :data-count="activeKey.length"
        :class="{ 'show-circle': activeKey.length > 0 }"
      >
        筛选
      </div>
      <div class="btn__expand"></div>
    </button>
    <ul
      class="list-filter__list"
      :class="{ 'is-active': isOpen }"
    >
      <li v-for="(item, index) in list" :key="item.key">
        <input
          type="checkbox"
          class="d-none"
          :id="`${item.key}-${timestamp}`"
          :value="item.key"
          v-model="activeKey"
        />
        <label
          :for="`${item.key}-${timestamp}`"
          class="list-filter__option"
          :class="{ 'is-active': activeKey.includes(item.key) }"
        >
          {{ item.name }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// 定义组件名称
defineOptions({
  name: 'ListFilter'
})

// 定义 props
const props = defineProps<{
  list?: any[]
  focusKey?: any[]
  placeholder?: string
}>()

// 定义 emits
const emit = defineEmits<{
  updateKey: [key: any[]]
}>()

// 响应式数据
const isOpen = ref(false)
const timestamp = ref(Date.now())

// 计算属性
const activeKey = computed({
  get() {
    return props.focusKey ?? []
  },
  set(newValue: any[]) {
    emit('updateKey', newValue)
  }
})

// 监听器
watch(() => props.focusKey, () => {
  closeHandler()
})

// 方法
const closeHandler = () => {
  isOpen.value = false
}
</script>

<style lang="scss" scoped>
.list-filter {
  position: relative;
  
  &__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f9fa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    .btn__text {
      font-size: 14px;
      line-height: 18px;
      letter-spacing: 0.01em;
      color: #004d4d;
      position: relative;
      
      &.show-circle {
        &::after {
          content: attr(data-count);
          position: absolute;
          top: -8px;
          right: -8px;
          background: #dc3545;
          color: white;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    
    .btn__expand {
      width: 16px;
      height: 16px;
      background: url('') center center no-repeat;
      background-size: 100% auto;
      transform: rotateZ(90deg);
      transition: transform 0.3s ease-in-out;
    }
    
    &.is-active {
      .btn__expand {
        transform: rotateZ(270deg);
      }
    }
  }
  
  &__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    
    &.is-active {
      max-height: 200px;
      overflow-y: auto;
    }
    
    li {
      list-style: none;
    }
  }
  
  &__option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    
    &:hover {
      background-color: #f8f9fa;
    }
    
    &.is-active {
      background-color: #e3f2fd;
      color: #0066cc;
      
      &::before {
        content: '✓';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #0066cc;
        font-weight: bold;
      }
    }
  }
}

.d-none {
  display: none !important;
}
</style>
